@extends('admin.layout.base')
@section('styles')
@endsection
@section('scripts')
    <script>
        function countUp(count,element){
            let divBy = 100,
                speed = Math.round(count / divBy),
                $display = $(element),
                runCount = 1,
                intSpeed = 1;
            let int = setInterval(function() {
                if(runCount < divBy){
                    $display.text(speed * runCount);
                    runCount++;
                } else if(parseInt($display.text()) < count) {
                    let currCount = parseInt($display.text()) + 1;
                    $display.text(currCount);
                } else {
                    clearInterval(int);
                }
            }, intSpeed);
        }
        $(function () {
            countUp({{ $rewardcounts }},'.count1');
            countUp({{ $hascounts }},'.count2');
            countUp({{ $usercounts }},'.count3');

            countUp({{ $allmoneys }},'.count4');
            countUp({{ $usersmoney }},'.count5');
            countUp({{ $hastxmoney }},'.count6');
            countUp({{ $cash_outs }},'.count7');
        });
        let app = new Vue({
            el: '#app',
            data: function() {
                return {

                }
            },
            created(){

            },
            methods: {

            }
        });
    </script>
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-home">
            <div class="panel-header">
                <div class="panel-title">
                    数据统计
                </div>
            </div>
            <div class="panel-main home-count">
                <div class="count-item good-count">
                    <div class="card-header">任务总量</div>
                    <div class="card-number count1">0</div>
                    <div class="card-description">当前已发布的任务总数</div>
                    <i class="fa fa-gift"></i>
                </div>
                <div class="count-item order-count">
                    <div class="card-header">已完成任务总量</div>
                    <div class="card-number count2">0</div>
                    <div class="card-description">所有用户完成的任务总数</div>
                    <i class="fa fa-cart-plus"></i>
                </div>
                <div class="count-item user-count">
                    <div class="card-header">用户总量</div>
                    <div class="card-number count3">0</div>
                    <div class="card-description">当前用户总数量</div>
                    <i class="fa fa-user"></i>
                </div>
                <div class="count-item recharge-count">
                    <div class="card-header">充值金额</div>
                    <div class="card-number count4">122345.00</div>
                    <div class="card-description">当前用户总充值金额</div>
                    <i class="fa fa-cny"></i>
                </div>
            </div>
            
            <div class="panel-main home-count">
            	<div class="count-item recharge-count">
                    <div class="card-header">用户总余额</div>
                    <div class="card-number count5">122345.00</div>
                    <div class="card-description">当前用户余额综合</div>
                    <i class="fa fa-cny"></i>
                </div>
                
                <div class="count-item recharge-count">
                    <div class="card-header">已经提现金额</div>
                    <div class="card-number count6">122345.00</div>
                    <div class="card-description">当前用户已提现总金额</div>
                    <i class="fa fa-cny"></i>
                </div>
                
                <div class="count-item recharge-count">
                    <div class="card-header">正在申请提现金额</div>
                    <div class="card-number count7">122345.00</div>
                    <div class="card-description">申请中的金额总和</div>
                    <i class="fa fa-cny"></i>
                </div>
                <div class="count-item">
                    
                </div>
            </div>
         
        </div>
    </div>
@endsection

